<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" @submit.native.prevent>
            <el-form-item label="关键词：">
              <el-input v-model="listPram.keyword" placeholder="名称" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click.native="getList">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" round @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item class="el-form-item-align-right">
              <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="openGroupEdit(null,null)"
                         v-has-permi="['admin:patrolGroup:save']">添加巡察组
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
          ref="treeList"
          v-loading="tableLoading"
          :data="treeList"
          size="mini"
          class="table"
          highlight-current-row
          row-key="id"
          :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
        <el-table-column align="center" prop="name" label="名称" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.name }} | ID:{{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="组长" prop="groupLeader" min-width="100"/>
        <el-table-column align="center" label="联系电话" prop="phone" min-width="100"/>
        <el-table-column align="center" label="电子邮箱" prop="email" min-width="100"/>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                style="width:40px;"
                @change="handleStatusChange($event,scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.pid" icon="el-icon-circle-plus" size="mini" type="text"
                       @click="openEdit(null,scope.row.id)">添加巡察对象
            </el-button>
            <el-button icon="el-icon-edit" size="mini" type="text" @click="openGroupEdit(scope.row.id,null)"
                       v-if="scope.row.pid === 0" v-has-permi="['admin:patrolGroup:save']">编辑
            </el-button>
            <el-button icon="el-icon-edit" size="mini" type="text" @click="openEdit(scope.row.id,null)"
                       v-else v-has-permi="['admin:patrolGroup:save']">编辑
            </el-button>
            <el-button icon="el-icon-delete" size="mini" type="text" @click="handlerDelete(scope.row.id)"
                       v-if="scope.row.pid!==0" v-has-permi="['admin:patrolGroup:delete']">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        :visible.sync="editDialog.show"
        :title="editDialog.id? '编辑':'新增'"
        destroy-on-close
        :close-on-click-modal="false"
        width="600px">
      <edit
          v-if="editDialog.show"
          :id="editDialog.id"
          :pid="editDialog.pid"
          @hideEditDialog="hideEditDialog"
          ref="editForm"
      />
    </el-dialog>
    <el-dialog
        :visible.sync="editGroupDialog.show"
        :title="editGroupDialog.id? '编辑':'新增'"
        destroy-on-close
        :close-on-click-modal="false"
        width="600px">
      <edit-group
          v-if="editGroupDialog.show"
          :id="editGroupDialog.id"
          :pid="editGroupDialog.pid"
          @hideEditGroupDialog="hideEditGroupDialog"
          ref="editForm"
      />
    </el-dialog>
  </div>
</template>
<script>
import edit from './edit'
import {getTree, deleteRow, updateStatus} from "@/api/patrol-group";
import {hasChild} from "@/utils/utils";
import EditGroup from "@/views/patrol-group/editGroup.vue";

export default {
  components: {EditGroup, edit},
  data() {
    return {
      listPram: {
        type: 1,
        keyword: '',
      },
      treeList: [],
      editDialog: {
        show: false,
        id: null,
        pid: null
      },
      editGroupDialog: {
        show: false,
        id: null,
        pid: null
      },
      tableLoading: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleStatusChange(status, id) {
      const loading = this.$loading({text: '更新中', background: 'rgba(255,255,255,.5)'})
      updateStatus({id: id, status: status}).then(() => {
        this.$message.success('更新状态成功')
        this.getList()
      }).finally(() => {
        loading.close()
      })
    },
    getList() {
      this.tableLoading = true
      getTree(this.listPram).then(res => {
        this.treeList = hasChild(res, 'child');
      }).finally(() => {
      })
      this.tableLoading = false;
    },
    openEdit(id = null, pid = null) {
      this.editDialog.id = id;
      this.editDialog.pid = pid;
      this.editDialog.show = true
    },
    openGroupEdit(id = null, pid = null) {
      this.editGroupDialog.id = id;
      this.editGroupDialog.pid = pid;
      this.editGroupDialog.show = true
    },
    handlerDelete(id) {
      this.$confirm('确认删除该数据吗？').then(() => {
        const loading = this.$loading({text: '删除中', background: 'rgba(255,255,255,.5)'})
        deleteRow(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        }).finally(() => {
          loading.close()
        })
      })
    },
    hideEditDialog() {
      this.editDialog.show = false
      this.getList()
    },
    hideEditGroupDialog() {
      this.editGroupDialog.show = false
      this.getList()
    },
    resetQuery() {
      this.listPram.keyword = '';
      this.getList()
    }
  }
}
</script>

